<template>
    <div class="log-upload-container">
        <PageHeader title="日志上报" />
        
        <van-tabs v-model:active="activeTab" animated swipeable>
            <van-tab title="日志上报">
                <LogUploadForm />
            </van-tab>
            <van-tab title="日志记录">
                <LogRecords />
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tabs as VanTabs, Tab as VanTab } from 'vant';
import PageHeader from '@/Pages/compontents/PageHeader.vue';
import LogUploadForm from './components/LogUploadForm.vue';
import LogRecords from './components/LogRecords.vue';

const activeTab = ref(0);
</script>

<style scoped>
.log-upload-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

:deep(.van-tabs) {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.van-tabs__wrap) {
    padding: 0 16px;
}

:deep(.van-tab) {
    font-size: 16px;
    color: #666;
}

:deep(.van-tab--active) {
    color: #1E9FFF;
    font-weight: 500;
}

:deep(.van-tabs__line) {
    background-color: #1E9FFF;
}

:deep(.van-tabs__content) {
    background: #fff;
}
</style>
